<template>
	<view class="page">
		<swiper class="swiper swiperSize" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red">
					<image src="../../../static/images/banner1.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">
					<image src="../../../static/images/banner1.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">
					<image src="../../../static/images/banner1.png"></image>
				</view>
			</swiper-item>
		</swiper>
		<view>
			<scroll-view class="header" scroll-x="true">
				<view class="program" v-for="(item,index) in program" :key="index" @click="selectProgram(index)"><text :class="[index==Indexes?'active':'']">{{item}}</text></view>
			</scroll-view>
		</view>
		<view class="contents">
			人们使用和消费，并能满足人们某种需求的任何东西包括有形的物品、无形的服务、组织、观念或它们
			的组合。产品一般可以分为五个层次，即核心产品、基本产品、期望产品、附加产品、潜在产品。核心产
			品是指整体产品提供给购买者的直接利益和效用；基本产品即是核心产品的宏观化；期望产品是指顾客在
			购买产品时，一般会期望得到的一组特性或条件；附加产品是指超过顾客期望的产品；潜在产品指产品
			开发物在未来可能产生的改进和变革。产品是“一组将输入转化为输出的相互关联或相互作用的活动”的
			结果，即“过程”的结果。在经济领域中，通常也可理解为组织制造的任何制品或制品的组合。在现代汉
			语词典当中的解释为“生产出来的物品”。简单来说是“为了满足市场需要，而创建的用于运营的功能及
			服务”就是产品。

		</view>
		<button type="primary" class="btn" @click="goExamine">一键申请</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				Indexes: 0,
				program: ["投标保证金", "投保保函", "履约保函", "中标贷款", "房贷", "车贷"]
			}
		},

		methods: {
			selectProgram(index) {
				this.Indexes = index;
			},
			goExamine() {
				var authData = uni.getStorageSync('authData');
				if (authData) {
					var Authorization = authData.auth;
					uni.showLoading({
						title: '加载中...'
					});
					uni.request({
						url: this.baseUrl + "/Finance/status",
						dataType: "json",
						header: {
							Authorization: Authorization
						},
						success: (res) => {
							switch (res.data.data.list.status) {
								case 1:
									uni.navigateTo({
										url: '../to-examine/to-examine'
									});
									break;
								case 2:
									uni.navigateTo({
										url: '../examine-ok/examine-ok'
									});
									break;
								case 3:
									uni.navigateTo({
										url: '../examine-fail/examine-fail'
									});
									break;
								default:
									uni.navigateTo({
										url: '../go-examine/go-examine' 
									});
							}

						},
						complete: () => {
							uni.hideLoading();    
						}
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 2000);
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F0F0F0;
	}

	.swiperSize {
		width: 750upx !important;
		height: 380upx !important;
	}

	.swiperSize swiper-item,
	.swiperSize view,
	.swiperSize image {
		width: 750upx !important;
		height: 380upx !important;
	}

	.header {
		width: auto;
		display: flex;
		font-size: 14px;
		flex-wrap: nowrap;
		white-space: nowrap;
		background: #F7F7F7;
	}

	.program {
		display: inline-block;
		width: 75px;
		height: 55px;
		line-height: 55px;
		padding: 0;
		text-align: center;
		color: #333333;
		position: relative;
		font-size: 28upx;
		font-family: PingFang-SC-Medium;
	}

	.active {
		color: #F33632;
	}

	.active:after {
		position: absolute;
		left: 35%;
		bottom: 15upx;
		height: 4upx;
		width: 30upx;
		content: '';
		-webkit-transform: scaleY(0.9);
		transform: scaleY(0.9);
		background-color: #F33632;
	}

	.contents {
		color: #999999;
		font-size: 28upx;
		background: #ffffff;
		border-bottom-right-radius: 30upx;
		border-bottom-left-radius: 30upx;
		padding: 42upx;
		line-height: 38upx;
	}

	.btn {
		margin-top: 60upx;
		width: 630upx;
		height: 90upx;
		background: url(../../../static/images/btn-bg.png) no-repeat;
		background-size: 100% 100%;
		border-radius: 45upx;
		border: none;
	}
</style>
